<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下拉菜单实现</title>
    <style>
        ul,
        li {
            list-style-type: none;
            overflow: hidden;
        }
        
        li>span {
            padding-left: 20px;
            cursor: pointer;
        }
        
        span.open {
            background-image: url(../img/add.png);
            background-repeat: no-repeat;
            background-position: center left;
        }
        
        span.closed {
            background-image: url(../img/minus.png);
            background-repeat: no-repeat;
            background-position: center left;
        }
        
        .hide {
            height: 0px;
        }
        
        .show {
            height: auto;
        }
    </style>
</head>

<body>
    <ul class="tree">
        <li>
            <span class="open">考勤管理</span>
            <ul class="hide show">
                <li>日常考勤</li>
                <li>请假申请</li>
                <li>加班/出差</li>
            </ul>
        </li>
        <li>
            <span class="closed">信息中心</span>
            <ul class="hide">
                <li>通知公告</li>
                <li>公司新闻</li>
                <li>规章制度</li>
            </ul>
        </li>
        <li>
            <span class="closed">协同办公</span>
            <ul class="hide">
                <li>公文流转</li>
                <li>文件中心</li>
                <li>内部邮件</li>
                <li>即时通信</li>
                <li>短信提醒</li>
            </ul>
        </li>
    </ul>

    <script>
        let span = document.querySelectorAll("span");

        span.forEach(function(item, index) {
            item.onclick = function() {
                if (this.className == "open") {
                    this.className = "closed"
                    this.nextElementSibling.className = "hide"
                } else {
                    var span = document.querySelector(".open")
                    if (span) {
                        span.className = "closed";
                        span.nextElementSibling.className = "hide"
                    }
                    this.className = "open"
                    this.nextElementSibling.className = "show"
                }
            }
        })
    </script>
</body>

</html>